<template>
  <el-dialog
    :title="'入库记录详情'"
    :model-value="visible"
    @update:model-value="$emit('update:visible', $event)"
    width="800px"
    :before-close="handleClose">
    
    <el-descriptions :column="2" border>
      <el-descriptions-item label="物料编码">{{ detailData.materCode }}</el-descriptions-item>
      <el-descriptions-item label="物料名称">{{ detailData.materName }}</el-descriptions-item>
      <el-descriptions-item label="物料分类">{{ detailData.materType }}</el-descriptions-item>
      <el-descriptions-item label="规格">{{ detailData.spec }}</el-descriptions-item>
      <el-descriptions-item label="仓库名称">{{ detailData.warehouseName }}</el-descriptions-item>
      <el-descriptions-item label="库位名称">{{ detailData.locationName }}</el-descriptions-item>
      <el-descriptions-item label="入库数量" :span="2">
        {{ formatNumber(detailData.in_Quantity) }} {{ detailData.unit }}
      </el-descriptions-item>
      <el-descriptions-item label="入库时间">{{ formatDateTime(detailData.in_Time) }}</el-descriptions-item>
      <el-descriptions-item label="入库类型">{{ detailData.in_Type }}</el-descriptions-item>
      <el-descriptions-item label="入库批次号">{{ detailData.in_BatchCode }}</el-descriptions-item>
      <el-descriptions-item label="筒仓编码">{{ detailData.siloCode }}</el-descriptions-item>
      <el-descriptions-item label="筒仓名称">{{ detailData.siloName }}</el-descriptions-item>
      <el-descriptions-item label="记录ID">{{ detailData.id }}</el-descriptions-item>
      <el-descriptions-item label="是否删除">
        <el-tag :type="detailData.IsDeleted ? 'danger' : 'success'">
          {{ detailData.IsDeleted ? '已删除' : '未删除' }}
        </el-tag>
      </el-descriptions-item>
    </el-descriptions>
    
    <template #footer>
      <el-button type="primary" @click="handleClose">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, watch } from 'vue'
import { ElMessage } from 'element-plus'

// 定义 props
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  detailData: {
    type: Object,
    default: () => ({})
  }
})

// 定义 emits
const emit = defineEmits(['update:visible', 'close'])

// 格式化数字显示
const formatNumber = (value) => {
  if (value === null || value === undefined) return '0'
  return Number(value).toLocaleString()
}

// 格式化日期时间
const formatDateTime = (dateString) => {
  if (!dateString) return ''
  const date = new Date(dateString)
  return date.toLocaleString()
}

// 关闭弹窗
const handleClose = () => {
  emit('update:visible', false)
  emit('close')
}
</script>

<style scoped>
/* 弹窗样式优化 */
:deep(.el-dialog__body) {
  padding: 20px;
}

.el-descriptions {
  margin-top: 10px;
}

:deep(.el-descriptions__body) {
  background-color: #f5f7fa;
}

:deep(.el-descriptions__label) {
  width: 120px;
  font-weight: bold;
  background-color: #eef0f5;
}

:deep(.el-descriptions__content) {
  background-color: #ffffff;
}
</style>